<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home/statistics' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>轮播管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播列表</el-breadcrumb-item>
    </el-breadcrumb>

    <template class="addSwiper">
      <el-button @click="addSwiperDialog" type="primary">添加轮播</el-button>
    </template>

    <el-main>
      <el-table :data="swiperList" border v-loading="loading">
        <el-table-column align="center" type="index" label="#" width="80">
        </el-table-column>
        <el-table-column align="center" prop="id" label="轮播ID" width="80">
        </el-table-column>
        <el-table-column align="center" prop="title" label="名称" width="160">
        </el-table-column>
        <el-table-column align="center" prop="url" label="跳转链接" width="160">
        </el-table-column>
        <el-table-column
          align="center"
          prop="price"
          label="轮播图片"
          width="220"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.img_url"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="seq" label="排序" width="80">
        </el-table-column>
        <el-table-column align="center" label="状态" width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="operatSwiperStatus(scope.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="updated_at"
          label="更新时间"
          width="180"
        >
        </el-table-column>
        <el-table-column align="center" label="操作" width="168">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改" placement="bottom">
              <el-button @click="openEditDialog(scope.row.id)" type="primary" size="mini" icon="el-icon-edit" ></el-button>
            </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <el-button type="danger" @click="deleteSwiperData(scope.row.id)" size="mini" icon="el-icon-delete" ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加轮播弹窗 -->
      <el-dialog title="添加轮播" width="30%" :visible.sync="dialogFormVisibleAddSwiper">
        <el-form :model="addForm" label-position='left'>
          <el-form-item label="图片名称"  label-width="70px">
            <el-input v-model="addForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图片地址"  label-width="70px">
            <el-input v-model="addForm.img" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="跳转链接"  label-width="70px">
            <el-input v-model="addForm.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" >
            <el-select v-model="addForm.status" placeholder="请选择轮播状态">
              <el-option label="启用" :value="1"></el-option>
              <el-option label="不启用" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleAddSwiper = false">取 消</el-button>
          <el-button type="primary" @click="addSwiperSubmit"
            >确 定</el-button
          >
        </div>
      </el-dialog>


        <el-dialog title="修改轮播" width="30%" :visible.sync="dialogFormVisibleEditSwiper">
        <el-form :model="editForm" label-position='left'>
          <el-form-item label="图片名称"  label-width="70px">
            <el-input v-model="editForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图片地址"  label-width="70px">
            <el-input v-model="editForm.img" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="跳转链接"  label-width="70px">
            <el-input v-model="editForm.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序"  label-width="70px">
            <el-input v-model="editForm.seq" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" >
            <el-select v-model="editForm.status" placeholder="请选择轮播状态">
              <el-option label="启用" :value="1"></el-option>
              <el-option label="不启用" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEditSwiper = false">取 消</el-button>
          <el-button type="primary" :loading="btnLoading" @click="addSwiperSubmitEdit()"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <el-pagination
        style="margin-top: 20px"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="pagination.total"
      >
      </el-pagination>
    </el-main>
  </div>
</template>

<script>
import { getSwiperList,addSwiper,deleteSwiper,operateStatus,editSwiper,swiperOrder,getSwiperDetail } from "../../api/swiper";
export default {
  name: "Statistics",
  data() {
    return {
      swiperList: [],
      pagination: {},
      queryInfo: {
        current: 1,
      },
      loading: false,
      dialogFormVisibleAddSwiper:false,
      dialogFormVisibleEditSwiper:false,
      addForm:{
        status:null,
        title:'',
        img:'',
        url:'',
      },
      editForm:{
        status:null,
        title:'',
        img:'',
        url:'',
        seq:null
      },
      swiperId:null,//排序
      btnLoading:false
    };
  },
  mounted() {
    this.getSwiperListData();
  },
  methods: {
    async getSwiperListData() {
      this.loading = true;
      const res = await getSwiperList(this.queryInfo);
      if (res && res.status === 200) {
        this.loading = false;
        this.swiperList = res.data.data;
        this.pagination = res.data.meta.pagination;
      }
      console.log(res);
    },
    //翻页
    handleCurrentChange(val) {
      console.log(val);
      this.queryInfo.current = val;
      this.getSwiperListData();
    },
    searchGood() {
      this.getSwiperListData();
    },
    addSwiperDialog(){
      this.dialogFormVisibleAddSwiper = true
    },
    // 提交添加的轮播数据
    async addSwiperSubmit(){
      const res = await addSwiper(this.addForm)
      if(res && res.status === 201){
        this.dialogFormVisibleAddSwiper = false
        this.$message.success('添加成功')
        this.addForm = {}
        this.getSwiperListData()
      }
    },
    // 删除轮播图数据
    async deleteSwiperData(id){
          const confirm = await this.$confirm('此操作将永久删除该轮播图, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(confirm === 'confirm'){
          const res = await deleteSwiper(id)
          if(res && res.status === 204){
            this.$message.success('删除成功')
            this.getSwiperListData()
          }
          // console.log(res)
        }
    },
    // 启用和禁用轮播数据
    async operatSwiperStatus(id){
      const res = await operateStatus(id)
      if(res && res.status === 204){
        this.$message.success('操作成功')
        this.getSwiperListData()
      }else {
        this.$message.error('操作失败')
        this.getSwiperListData()
      }
    },
    async openEditDialog(id){
      this.swiperId = id
      this.dialogFormVisibleEditSwiper = true
      const res = await getSwiperDetail(id)
      if(res && res.status === 200){
        this.editForm = res.data
      }
      console.log(res)

      
    },
    // 更新轮播和排序
    async addSwiperSubmitEdit(){
     this.btnLoading = true
     const editSwiperData = editSwiper(this.swiperId,this.editForm) 
     const swiperOrdrData = swiperOrder(this.swiperId,this.editForm.seq)
     const res = await Promise.all([editSwiperData,swiperOrdrData])
     if(res && res[0].status===204 && res[1].status === 204){
       this.btnLoading = false
       this.$message.success('更新成功')
       this.dialogFormVisibleEditSwiper = false
       this.getSwiperListData()
     }else{
       this.$message.error('更新失败')
     }
     console.log(res)
    }
  },
};
</script>

<style scoped lang="css">
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 40px;
}
.el-form {
  padding: 0 0 0 20px;
  margin-top: 20px;
}
.el-button {
  margin-top: 20px;
  margin-left: 20px;
}
</style>